<template>
  <view class="page">
    <view class="head-search-wrap">
      <image
        src="/static/image/bg.png"
        mode="aspectFill"
        class="bg-img"></image>
      <u-navbar
        title="热门搜索"
        :placeholder="true"
        :border="false"
        :autoBack="true"
        :titleStyle="{ color: '#000000' }"
        :leftIconColor="'#000000'"></u-navbar>

      <view class="head-search">
        <view class="" style="position: relative; z-index: 14">
          <u-search
            :borderColor="showSearchBorder ? '#DDDDDD' : '#fff'"
            v-model="keyword"
            height="36"
            bgColor="#fff"
            :showAction="false"
            searchIconColor="#000000"
            :searchIconSize="20"
            placeholderColor="#BDBDBD"
            placeholder="搜索产品名称"
            @search="handleSearch"></u-search>
        </view>
      </view>
    </view>
    <view class="page-ctx">
      <view class="no-search">
        <view
          class="sec-box"
          style="margin-top: 40rpx"
          v-if="suggest_keywords.length">
          <view class="sec-title flex-between">
            <view class="text">热门搜索</view>
            <view class="icon-box" @click="1">
              <image src="@/static/image/refresh.png" mode=""></image>
            </view>
          </view>
          <view class="sec-items">
            <view class="tag-list flex">
              <view
                class="tag"
                v-for="(item, index) in suggest_keywords"
                :key="index"
                @click="toHot(item)">
                {{ item.title }}
              </view>
            </view>
          </view>
        </view>
        <view class="sec-box">
          <view class="sec-title flex-between">
            <view class="text">历史搜索</view>
            <view
              class="icon-box"
              v-if="history_search_keywords.length > 0"
              @click="clear_search()">
              <image src="@/static/search/clear.png" mode=""></image>
            </view>
          </view>

          <view class="sec-items" v-if="history_search_keywords.length">
            <view class="tag-list flex">
              <view
                class="tag"
                v-for="(item, index) in history_search_keywords"
                :key="index"
                @click="to_search(item)">
                {{ item }}
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- <view class="suggest-title">
				推荐好物
			</view>

			<view class="product-wrap">
				<productList :list="products"></productList>
				<u-loadmore :status="product_loadmore_status" />
			</view> -->
    </view>

    <w_bottom_safe height="60" />
  </view>
</template>

<script>
import productList from "@/components/product/productList.vue";

import { mapState } from "vuex";

export default {
  components: {
    productList,
  },
  data() {
    return {
      headBackground: "rgba(255,255,255,0)", //控制顶部标题栏颜色 默认透明颜色 transparent
      showSearchBorder: false,

      keyword: "",
      history_search_keywords: [],

      //
      products: [],
      pagination: {
        page: 1,
        pageNum: 6,
      },
      product_loadmore_status: "loadmore", //loadmore  / loading / nomore

      //
      // suggest_keywords: []
    };
  },

  computed: {
    ...mapState(["vuex_config"]),

    suggest_keywords() {
      let list = [];
      if (this.vuex_config.hotSearch) {
        try {
          list = JSON.parse(this.vuex_config.hotSearch);
        } catch (e) {
          //TODO handle the exception
        }
      }
      return list;
    },
  },
  onLoad(options) {
    this.query_product();
  },
  onShow() {
    this.setView();
  },
  onHide() {},
  onPullDownRefresh() {},
  onPageScroll(e) {
    let percent = e.scrollTop / 50;
    if (percent > 1) {
      percent = 1;
    }
    this.headBackground = `rgba(255,255,255,${percent})`;
    this.showSearchBorder = e.scrollTop >= 30;
  },

  onReachBottom() {
    this.loadMore();
  },

  methods: {
    loadMore() {
      if (this.product_loadmore_status == "loadmore") {
        this.product_loadmore_status = "loading";
        this.pagination.page++;
        this.query_product();
      }
    },

    setView() {
      this.set_history_search_keyword();
      // this.query_suggest();
    },
    set_history_search_keyword() {
      let cache_keywords = uni.getStorageSync("cache_product_search_keywords");
      console.log("本地搜索历史 cache_keywords", cache_keywords);
      if (cache_keywords) {
        this.history_search_keywords = cache_keywords;
      } else {
        this.history_search_keywords = [];
      }
    },

    // query_suggest() {
    // 	//【获取景点列表】
    // 	this.$api({
    // 		url: '/service.php',
    // 		method: 'get',
    // 		data: {
    // 			action: 'daohang_lists',
    // 			channelId: '4',
    // 			ids: '', //线路景点id
    // 		},
    // 	}).then(res => {
    // 		if (res.code == 200) {
    // 			this.points = res.data;
    // 		}
    // 	})
    // },

    toHot(item) {
      this.toRoute({
        path: "/product-list",
        query: {
          title: "热门搜索",
          keyword: item.title,
        },
      });
    },

    to_search(keyword) {
      this.toRoute({
        path: "/product-list",
        query: {
          title: "搜索结果",
          keyword: keyword,
        },
      });
    },

    clear_search() {
      console.log("清空搜索");
      this.$store.commit("set_cache_product_search_keywords", {
        type: "清空",
        value: "",
      });
      this.history_search_keywords = [];
    },

    handleSearch() {
      if (!this.keyword) {
        // return this.$alert('请输入搜索内容')
      } else {
        this.$store.commit("set_cache_product_search_keywords", {
          type: "新增",
          value: this.keyword,
        });
      }

      this.toRoute({
        path: "/product-list",
        query: {
          title: "搜索结果",
          keyword: this.keyword,
        },
      });
    },

    query_product() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "product_plist",
          ...this.pagination,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.products = this.products.concat(res.data);
          this.product_loadmore_status =
            res.data.count > this.products.length ? "loadmore" : "nomore";
        }
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f6f6f6;
  height: 100%;
}
</style>

<style lang="scss" scoped>
.head-search-wrap {
  position: relative;
  .bg-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 432upx;
    z-index: 12;
  }

  .head-search {
    padding: 8upx 32upx 52upx;
    background-color: #fff;
  }

  // ::v-deep .uicon-search {
  // 	font-size: 40rpx !important;
  // }
}

.page-ctx {
  padding: 40rpx 32rpx;
  position: relative;
  z-index: 2;
}

.sec-box {
  margin-top: 26rpx;

  .sec-title {
    .text {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
    }

    .icon-box {
      width: 32rpx;
      height: 32rpx;

      image {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }

  .sec-items {
    margin-top: 32rpx;

    .tag-list {
      flex-wrap: wrap;

      .tag {
        display: inline-block;
        padding: 8upx 32upx;
        background: #ffffff;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        margin-bottom: 16upx;
        margin-right: 32upx;
        font-size: 24rpx;
        color: #666666;
      }
    }
  }
}

.search-result {
  .search-list {
    .search-item {
      padding: 16rpx 0;
      border-bottom: 1rpx solid #eee;

      .icon-box {
        width: 40rpx;
        height: 40rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .title {
        padding-left: 24rpx;
        flex: 1;
        overflow: hidden;

        font-size: 26rpx;
        color: #000;
      }
    }
  }
}

.suggest-title {
  margin-top: 48rpx;
  margin-bottom: 32rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 28rpx;
  color: #ff1a00;
}
</style>
